So, what’s going on here?

For the CSS part, we’ve used LESS. If you’re not familiar with LESS, you can quickly take a look at //lesscss.org/.

Basically LESS writing CSS in a more convenient way. The LESS code will be compiled to CSS, so in the end it’s plain old CSS.

We have the div.chart-wrap wrapper that holds the entire bar chart area.

Bar charts are usually vertical, meaning that the layout of the chart is such that the bars height are proportional to the data they represent.

Bar charts can also be horizontal, meaning that the bars span from left to right horizontally and proportional to the data they represent.

For our chart we use two classes: vertical and horizontal for the div.chart-wrap element to indicate the type of bar chart.

In CSS/LESS we can change the width and height of the chart by changing the 2 variables @chart-width and  @chart-height.

We also have the div.grid that is used both for holding the bars and for drawing the grid elements.

For convenience, we will use a HTML/CSS trick. We will create our bar chart in a horizontal layout by default.

Why?

Because div elements tend to arrange better one below another. Just what we need our bars to do.

To transform our bar chart into a vertical bar chart, we will simply need to rotate our chart 90 degrees counter clock-wise. Since our chart’s height and width differ, when we rotate it, we also need to translate it by half of the width and height to avoid running off the screen.

We do this using the CSS transform with translate and rotate.

For the grid lines, we simply need a CSS border and for each 20% markers we set the background to a repeating gradient that will draw lines for each 20% of the div like this:

background:repeating-linear-gradient(90deg,transparent,transparent 19.5%,fadeout(@grid-color,30%) 20%);

How about the bars of the bar chart?

As mentioned before, we will use simple div elements that we will stylize and fill with orange.

We need to set the size of our bars according to the chart data. For this we will use another neat HTML/CSS trick.

In the style attribute of the div.bar element we can use custom CSS variables.

So, we use --bar-value to indicate the value for each bar as a percentage.

This is very useful in this case, because that becomes both the value, but also the size of the bar.

How can we use the --bar-value value in CSS?

Easy, we use it as the width of the bar like this:

Please keep in mind that our HTML bar chart is by default horizontal. That’s why we only need to adjust the bar width.

How about the labels for each bar?

We can use yet another HTML/CSS trick. We will add an attribute called data-name to our div.bar element. The string value of this attribute can then be used in the CSS like this:

content:attr(data-name);

We just add this via a CSS ::after pseudo element and style it such that it is displayed near each corresponding bar.

What else?

Well, we can set the bar color, bar thickness, spacing between bars and even how to round the corners of the bars using the CSS/LESS variables at the top:

That’s pretty much it!

Play around with changing the --bar-value and data-name attributes in the div.bar elements to create an HTML bar chart with your data.

Let me know what features you might like to add to this.